<!-- 个人加入队伍 -->
<template>
	<view class="item-block">
		<view class="one_item">
			<view class="left_avatar">
				<u-avatar :src="formdata.avatarUrl" shape="square" size="163"></u-avatar>
			</view>
			<view class="right_info">
				<u--form labelPosition="left" ref="uForm" labelWidth='50'>
					<view class="title">
						个人信息
					</view>
					<u-form-item label="姓名" borderBottom ref="item1">
						<u--input v-model="formdata.nickName" border="none"></u--input>
					</u-form-item>
					<u-form-item label="性别" borderBottom ref="item1">
						<u--input v-model="formdata.sexname" border="none"></u--input>
						<span></span>
					</u-form-item>
					<u-form-item label="球龄" borderBottom ref="item1">
						<u--input v-model="formdata.ballYear" border="none"></u--input>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<view class="two_item">
			<view class="right_info">
				<u--form labelPosition="left" ref="uForm" labelWidth='80'>
					<view class="title">
						比赛信息
					</view>
					<u-form-item label="地址" borderBottom ref="item1">
						<u--input v-model="formdata.placeName" border="none"></u--input>
					</u-form-item>
					<u-form-item label="开始时间" borderBottom ref="item1">
						<u--input v-model="formdata.startTime" border="none"></u--input>
					</u-form-item>
					<u-form-item label="参赛团队" borderBottom ref="item1">
						<u--input v-model="formdata.numname" border="none"></u--input>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<view class="three_item">
			<view class="right_info">
				<u--form labelPosition="left" ref="uForm" labelWidth='80'>
					<view class="title">
						队伍信息
					</view>
					<u-form-item label="队伍名称" borderBottom ref="item1">
						<u--input v-model="formdata.teamName" border="none"></u--input>
					</u-form-item>
					<u-form-item label="组队方式" borderBottom ref="item1">
						<u--input v-model="formdata.teamtypename" border="none"></u--input>
					</u-form-item>
					<u-form-item label="队伍介绍" borderBottom ref="item1">
						<u--textarea v-model="formdata.teamDesc" autoHeight></u--textarea>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<view class="bot_item">
			<view class="form-but">
				<u-button type="primary" text="加入并支付" @click="submit"></u-button>
			</view>
			<view class="detail_item">
				<view class="">
					<u-checkbox-group v-model='checked' size='18'>
						<u-checkbox name='1' activeColor="#de3600"></u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="" @click="agreementfn">
					我已阅读<span>ptgolf</span>服务条款和<span>用户协议、隐私政策</span>并同意协议内容
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ids: {},//队伍id,赛事id
				formdata: {},
				orderid: '',//支付id
				checked: [],
			
				
			}
		},
		created() {

		},
		onLoad(options) {
			// 接收传参
			this.ids = JSON.parse(decodeURIComponent(options.id));
			this.formdetail()

		},
		mounted() {



		},
		methods: {
			// 协议详情跳转页
			agreementfn() {
				uni.navigateTo({
					url: `/pages/layout/agreement`,
					events: {
						reverseData: (data) => {
							if (data.data) {
								this.checked = ['1']
							}
						},

					},
				})
			},
			//表单回显详情
			formdetail() {
				const that = this
				const id = this.ids.teamId
				this.$request(`/race/joinTeamDetail/${id}`, 'get')
					.then(
						res => {
							that.formdata = res.data.data
							that.formdata.sexname = res.data.data.sex == 1 ? '男' : '女'
							that.formdata.teamtypename = res.data.data.teamType == 1 ? '公开' : '私密'
							that.formdata.numname = that.formdata.joinNum + '/' + that.formdata.teamNum

						})
			},
			//支付提交按钮
			submit() {
				if (this.checked[0] != 1 && this.checked.length == 0) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请勾选用户服务协议",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png',

					})
					return
				}
				const that = this
				const data = {
					raceId: Number(this.ids.raceId),
					teamId: Number(this.ids.teamId),
					joinType: 1
				}
				this.$request(`/race/joinTeam`, 'post', data)
					.then(
						res => {
							if (res.data.data.flag) {
								that.orderid = res.data.data.orderId
								that.gopayment()//触发支付api
							} else {
								that.$refs.uToast.show({
									type: 'error',
									message: res.data.data.message,
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png',
								})
							}
						})
			},
			// 支付
			gopayment() {
				const that = this
				const data = {
					id: this.orderid,
					orderType: 2,
				}
				this.$request(`/order/preGenerate`, 'POST', data)
					.then(
						res => {
							uni.requestPayment({
								timeStamp: res.data.data.timeStamp, // 时间戳
								nonceStr: res.data.data.nonceStr, // 随机字符串
								package: res.data.data.packageVal, // 预支付交易会话标识
								signType: res.data.data.signType, // 签名方式
								paySign: res.data.data.paySign, // 签名
								success(res) {
									// 支付成功回调
									uni.showToast({
										title: '支付成功',
										icon: 'success'
									});
									uni.navigateBack({
										delta: 1
									});

								},
								fail(res) {
									// 支付失败回调
									uni.showToast({
										title: '支付失败',
										icon: 'error'
									});
								}
							});
						})
			},
		}
	}
</script>

<style scoped lang="scss">
	.item-block {
		height: calc(100vh - 20px);
		background-color: #f4f4f4;
		padding: 10px 20px;

		.one_item {
			height: 163px;
			display: flex;

			.left_avatar {
				margin-right: 10px;

				::v-deep .u-avatar__image--square {
					border-radius: 15px !important;
				}

			}

			.right_info {
				// height: 143px;
				padding: 10px;
				background-color: #fff;
				border-radius: 15px;

				.title {
					font-weight: 600;
					margin-bottom: 5px;
				}

				::v-deep .u-line {
					border-bottom-width: 0px !important;
				}

				::v-deep .u-form-item__body {
					border-top: 1px solid #ddd;
					padding: 7px 0 !important;

				}

				::v-deep .u-form-item__body__left__content__label {
					color: #898989;
					font-size: 14px;
				}
			}
		}

		.two_item,
		.three_item {
			margin-top: 10px;

			::v-deep .u-textarea {
				padding: 0px !important;
				// height: auto !important; 
				// min-height: 20px !important;
			}

			.right_info {
				// height: 143px;
				padding: 10px;
				background-color: #fff;
				border-radius: 15px;

				.title {
					font-weight: 600;
					margin-bottom: 5px;
				}

				::v-deep .u-line {
					border-bottom-width: 0px !important;
				}

				::v-deep .u-form-item__body {
					border-top: 1px solid #ddd;
					padding: 7px 0 !important;

				}

				::v-deep .u-form-item__body__left__content__label {
					color: #898989;
					font-size: 14px;
				}
			}
		}

		.bot_item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.form-but {
				margin-top: 15px;

				::v-deep .u-button {
					width: calc(100vw - 40px);
					border-radius: 25px;
					border: 0px;
					background-color: #de3600;
					height: 47px;
				}
			}

			.detail_item {
				margin-top: 5px;
				align-items: center;
				margin-bottom: 30px;
				display: flex;
				color: #afafaf;
				font-size: 22rpx;

				span {
					color: #5c79f6;
				}
			}
		}
	}
</style>